<style>
    .goods-introduction{
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        word-wrap: break-word;
    }
</style>
<div class="container">
    <!-- BEGIN SIDEBAR & CONTENT -->
    <div class="row margin-bottom-40">
        <!-- BEGIN CONTENT -->
        <div class="col-md-12 col-sm-12">
            <#if cartProductList?? && cartProductList?size gt 0>
            <div class="goods-page">
                <div class="goods-data clearfix">
                    <div class="table-wrapper-responsive">
                        <table summary="Shopping cart">
                            <tr>
                                <th class="goods-page-image">商品图片</th>
                                <th class="goods-page-description">商品简介</th>
                                <th class="goods-page-quantity">数量</th>
                                <th class="goods-page-price">单价</th>
                                <th class="goods-page-total" colspan="2">小计</th>
                            </tr>
                            <#list cartProductList as cartProduct>
                                <tr class="goodsList">
                                    <td class="goods-page-image">
                                        <a href="javascript:;"><img src="${cartProduct.productImg!}" style="width: 75px;height: 75px"></a>
                                    </td>
                                    <td class="goods-page-description">
                                        <h3><a href="/goods/detail?cid=0&id=${cartProduct.productId!}" target="_blank">${cartProduct.productName!}</a></h3>
                                        <p class="goods-introduction">${cartProduct.introduction!}</p>
                                    </td>
                                    <input type="hidden" name="productId" value="${cartProduct.productId!}">
                                    <input type="hidden" name="productNum" value="${cartProduct.productNum!}">
                                    <input type="hidden" name="salePrice" value="${cartProduct.salePrice!}">
                                    <td class="goods-page-quantity">
                                        <div class="product-quantity">
                                            <input name="product-quantity" data-productid="${cartProduct.productId!}" type="text" value="${cartProduct.productNum!}" readonly class="form-control input-sm">
                                        </div>
                                    </td>
                                    <td class="goods-page-price">
                                        <strong><span>￥</span><span>${cartProduct.salePrice!}</span></strong>
                                    </td>
                                    <td class="goods-page-total">
                                        <strong><span>￥</span><span>${cartProduct.subTotal!}</span></strong>
                                    </td>
                                    <td class="del-goods-col">
                                        <a class="del-goods" href="javascript:;" onclick="removeGoods('${cartProduct.productId!}')">&nbsp;</a>
                                    </td>
                                </tr>
                            </#list>
                        </table>
                    </div>
                    <input type="hidden" name="orderTotal" value="${total!}">
                    <input type="hidden" name="payment" value="${total!}">
                    <div class="shopping-total">
                        <ul>
                            <li class="shopping-total-price">
                                <em>合计</em>
                                <strong class="price"><span>￥</span><span id="totalSpan">${total!}</span></strong>
                            </li>
                        </ul>
                    </div>
                    <div class="shopping-total" style="clear: both;width: 270px;">
                        <ul>
                            <li class="shopping-total-price">
                                <em>支付方式</em>
                                <div style="margin-top: 5px;">
                                    <#if member.type?? && member.type == 0>
                                    <label class="radio-inline">
                                        <input type="radio" name="payType" id="optionsRadios3" value="1" checked> 部门余额
                                    </label>

                                    <label class="radio-inline">
                                        <input type="radio"  name="payType" id="optionsRadios4"  value="0"> 支付宝
                                    </label>
                                    <#else>
                                        <label class="radio-inline" style="padding-left: 130px">
                                            <input type="radio" name="payType" id="optionsRadios4"  value="0" checked> 支付宝
                                        </label>
                                    </#if>
                                </div>

                            </li>
                        </ul>
                    </div>
                </div>
                <a class="btn btn-default" href="/">继续购物<i class="fa fa-shopping-cart"></i></a>
                <button class="btn btn-primary" type="button" id="submitBtn">提交订单</button>
            </div>
            <#else>
                <div style="width: 100%;text-align: center;height: 150px;background-color: white">
                    <img src="/assets/pages/img/no_goods.png" style="height: 100px;float: none;">
                    <p style="margin-top: 20px">您的购物车是空的哦，赶紧去逛逛吧~~</p>
                </div>
            </#if>
        </div>
        <!-- END CONTENT -->
    </div>
    <!-- END SIDEBAR & CONTENT -->


</div>



<script type="text/javascript">
    jQuery(document).ready(function() {
        Layout.init();
        Layout.initOWL();
        Layout.initImageZoom();
        Layout.initTouchspin();
        Layout.initUniform();
        Layout.initSliderRange();
    });

    $("input[name='product-quantity']").on("change", function(){debugger;
        var id = $(this).attr('data-productid');
        var num = $(this).val();
        var price = $(this).parents(".goods-page-quantity").next().find('span').eq(1).html();
        var subTotalSpan = $(this).parents(".goods-page-quantity").next().next().find('span').eq(1);
        var subTotal = parseFloat(subTotalSpan.html());
        var total = parseFloat($("#totalSpan").html());
        $.post('/cart/cartEdit',{productId:id,productNum:num},function (data) {
            subTotalSpan.html(price*num);
            total = total + price*num - subTotal;
            $("#totalSpan").html(total);
            $('input[name="orderTotal"]').val(total);
            $('input[name="payment"]').val(total);
        })
    });

    $("#submitBtn").on('click',function () {
        var payType = $('input[name="payType"]:checked').val();
        var msg;
        if (payType == 1) {
            msg = "确认要提交订单吗？";
        }else{
            msg = "确认要提交订单吗？提交后请在1小时内付款，超时订单将自动取消";
        }
        layer.confirm(msg,{icon:0},function(){
            var t = $(".goodsList");
            var goodsList = new Array();
            $.each(t, function(val,index) {
                var productId =  $(this).find('input[name="productId"]').val();
                var productNum =  $(this).find('input[name="productNum"]').val();
                var salePrice =  $(this).find('input[name="salePrice"]').val();
                var goods = {productId:productId,productNum:productNum,salePrice:salePrice};
                goodsList.push(goods);
            });

            var orderTotal = $('input[name="orderTotal"]').val();
            var payment = $('input[name="payment"]').val();
            var param = {orderTotal:orderTotal,payment:payment,payType:payType,goodsList:goodsList};
            var index = layer.load(3);
            $.ajax({
                url: "/order/addOrder",
                type : "POST",
                traditional:true,
                contentType : 'application/json',
                dataType : 'json',
                data: JSON.stringify(param ),
                success:function (data) {
                    layer.close(index);
                    if (data.success){
                        if (payType == 1) {
                            layer.msg("订单提交成功，请等待管理员审批");
                            setTimeout(function () {
                                location.href = '/personalCenter';
                            },1000)
                        }else{
                            location.href = "/order/payOrder?orderId="+data.result
                        }
                    }else{
                        layer.msg(data.message);
                    }
                }
            })
        });

    })
</script>
